<script>
import { reactive, toRefs, ref } from "vue";
import Taro from "@tarojs/taro";

// 获取数据字典
import { getDicMap } from "@/utils/storage";
import { carsQuery, carsDel } from "./api";
import TzVue, { useReachBottom } from "@/lib/TzVue";

export default new TzVue({
  name: "CarQuery",
  components: {},
  setup() {
    const dicMap = getDicMap();
    // 帐号类型  1个人 2司机 0操作员   dicMap.userType={isPersonal:true, isDriver:false, isOperator:false}
    const userType = dicMap.userType.value;
    const state = reactive({
      queryData: [],
      pageParams: {
        currentPage: 1,
      },
    });
    // 因为后端返回条数是0或小于20都把总条数和分页数改成了0 所以只能自己+一个页码判断
    let nowCurrentPage = 1;

    //默认查询车辆  {currentPage: 1}
    const initCarList = (params, reachBottomFlag) => {
      Taro.showLoading({
        title: "加载中",
      });
      // const params = { ...state.pageParams };
      carsQuery(params)
        .then((res) => {
          Taro.hideLoading();

          if (reachBottomFlag) {
            if (nowCurrentPage !== state.pageParams.currentPage) {
              state.queryData = state.queryData.concat(res.data.recordList); //新的页码才进行数据加载
            }
          } else {
            state.queryData = res.data.recordList;
          }

          nowCurrentPage = state.pageParams.currentPage; //赋值当前页码
          if (res.data.recordList.length === 20) {
            state.pageParams.currentPage++; //下一页码
          }
        })
        .catch(() => {
          Taro.hideLoading();
        });
    };
    initCarList({ currentPage: state.pageParams.currentPage }); // 1

    // 展开
    const handleSlider = (item) => {
      item.isShow = !item.isShow;
    };
    const handleDel = (item, event) => {
      // 阻止冒泡
      event.stopPropagation();
      Taro.showModal({
        title: "",
        content: "确定删除该条车辆信息吗？",
        success: function (res) {
          if (res.confirm) {
            const params = { id: item.truckId };
            carsDel(params).then((res) => {
              if (res.code === 0) {
                Taro.showToast({
                  title: "成功",
                  icon: "success",
                  duration: 2000,
                });
                initCarList({ currentPage: 1 });
              } else {
                Taro.showToast({
                  title: res.message ? res.message : "失败",
                  icon: "none",
                  duration: 2000,
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    };

    // 触底监控
    useReachBottom(() => {
      initCarList({ currentPage: state.pageParams.currentPage }, true); // 2
    });

    // 渲染车辆list
    const unListView = () => {
      return <tz-view class="text-center">暂无数据</tz-view>;
    };
    const driverList = (item, index) => {
      return (
        <tz-view
          class="driver-list"
          class={index % 2 === 0 ? "row_odd" : "row_even"}
          key={index}
        >
          <tz-cell title="司机名称">
            {item.driverName}
            {item.isMain === 1 ? "(常用)" : "(备用)"}
          </tz-cell>
          <tz-cell title="司机卡号" v-show={item.driverCode}>
            {item.driverCode}
          </tz-cell>
          <tz-cell title="ROCARS账号" v-show={item.hkDriverCode}>
            {item.hkDriverCode}
          </tz-cell>
          <tz-cell title="大陆联系方式">{item.dMobile}</tz-cell>
          <tz-cell title="香港联系方式">{item.hkDMobile}</tz-cell>
        </tz-view>
      );
    };
    const listView = (item) => {
      return (
        <tz-view
          class="list-item"
          class={item.isShow ? "open" : ""}
          onClick={() => handleSlider(item)}
          key={item.truckId}
        >
          <tz-view class="list-header bg-blue">
            <tz-cell
              title={item.truckLicenseName ? "内地车牌" : "香港车牌"}
              class="cell"
            >
              {item.truckLicenseName
                ? item.truckLicenseName
                : item.hkTruckLicenseName}
            </tz-cell>
            <tz-view>
              <tz-view class="list-icon">
                <tz-icon name="arrow-bottom"></tz-icon>
              </tz-view>
              <tz-view
                class="list-del"
                onClick={(event) => handleDel(item, event)}
                v-show={item.isShow && userType === "1"}
              >
                <tz-view class="icon-box">
                  <tz-icon name="close"></tz-icon>
                </tz-view>
                <text>删除</text>
              </tz-view>
            </tz-view>
          </tz-view>

          <tz-view class="list-content" v-show={item.isShow}>
            <tz-view class="bg-blue padding-bottom5">
              <tz-cell title="香港车牌" v-show={item.hkTruckLicenseName}>
                {item.hkTruckLicenseName}
              </tz-cell>
              <tz-cell title="车辆海关代码" v-show={item.truckLicenseCode}>
                {item.truckLicenseCode}
              </tz-cell>
              <tz-cell title="车辆类型" v-show={item.truckType}>
                {item.truckType === "0"
                  ? "吨车"
                  : item.truckType === "1"
                  ? "货柜车"
                  : ""}
              </tz-cell>
            </tz-view>

            {!item.driverList && (
              <tz-view>
                <tz-cell title="司机名称" v-show={userType !== "0"}>
                  {item.driverName}
                </tz-cell>
                <tz-cell title="司机卡号" v-show={item.driverCode}>
                  {item.driverCode}
                </tz-cell>
                <tz-cell title="ROCARS账号" v-show={item.hkDriverCode}>
                  {item.hkDriverCode}
                </tz-cell>
                <tz-cell title="大陆联系方式" v-show={userType !== "0"}>
                  {item.dMobile}
                </tz-cell>
                <tz-cell title="香港联系方式" v-show={userType !== "0"}>
                  {" "}
                  {item.hkDMobile}
                </tz-cell>
              </tz-view>
            )}

            {item.driverList &&
              item.driverList.map((item, index) => driverList(item, index))}
          </tz-view>
        </tz-view>
      );
    };

    return () => {
      return (
        <tz-view class="car-query">
          <tz-view class="list-title">
            <text>车辆信息:</text>
          </tz-view>
          <tz-view class="list-view">
            {state.queryData.length > 0
              ? state.queryData.map((item) => listView(item))
              : unListView()}
          </tz-view>
        </tz-view>
      );
    };
  },
});
</script>

<style lang="scss">
.car-query {
  .row_odd {
    background-color: #eef1f5;
  }
  .row_even {
    background-color: rgba(238, 241, 245, 0.2);
  }
  .text-center {
    text-align: center;
    color: $text-color;
  }
  .hidden {
    display: none;
  }
  .padding-bottom5 {
    padding-bottom: 5px;
  }
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .list-title {
    text-align: left;
    color: #1aad19;
    width: 100%;
    padding: 5px 0;
  }
  .list-view {
    width: 100%;
    .list-item {
      width: 100%;
      border-bottom: 1px solid #ddd;
      .list-header {
        display: flex;
        background-color: #fff;
        .cell {
          flex: 2;
        }
        .list-del {
          flex: 1;
          // line-height: 44px;
          font-size: 12px;
          text-align: right;
          padding-right: 15px;
          color: $danger-color;
          .icon-box {
            line-height: 12px;
          }
          position: relative;
          top: 10px;
        }
        .list-icon {
          padding-right: 15px;
          line-height: 44px;
          color: #e4e4e4;
          .tz-icon-arrow-bottom {
            top: 5px;
          }
        }
      }
      .list-content {
        // display: none;
        .tz-cell {
          // rpx == 2 px
          line-height: 16px;
          font-size: 12px;
          margin-bottom: 5px;
        }
      }
      .tz-cell .tz-cell-label {
        text-align: right;
        padding-right: 5px;
        color: #b1b0af;
        width: 100px;
      }
      .driver-list {
        margin-top: -5px;
        padding: 5px 0;
      }
    }
    .list-item.open {
      .bg-blue {
        background-color: #ace8ee;
      }
      .list-icon {
        display: none;
      }
    }
  }
}
</style>
